<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,
        body {
            height: 500%;
        }
    </style>
</head>

<body>
    <script>
        //什么是节流
        /* 
        函数节流：一个函数执行一次后，只有大于执行周期后才执行第二次
        有个需要频繁触发的函数，出于优化性 能角度，只让函数触发的第一次生效，后面的不生效
        当指定时间持续触发某个事件时，该事件只会执行首次触发事件，也就是说指定时间内只会触发一次。 
        */
        /* 
        fn:要被节流的函数
        delay：规定的时间
         */


        function throttle(fn, delay) {
            //记录上一次函数触发的时间
            var lastTime = 0;
            return function () { //运用了闭包
                //记录当前函数触发的时间
                var nowTime = Date.now();
                if (nowTime - lastTime > delay) {
                    fn.call(this);
                    //同步时间
                    lastTime = nowTime;
                }
            }
        }

        document.onscroll = throttle(() => {
            console.log('scrool函数北触发了' + Date.now());
        }, 200)
    </script>

</body>

</html>